iT邦幫忙

第 12 屆 iThome 鐵人賽

0
自我挑戰組

2020 iT邦幫忙鐵人賽 網頁前端-刻意練習系列 第 31

Day31 網頁前端-持續練習(來杯咖啡)

  • 分享至 

  • xImage
  •  

Day31 來杯咖啡

https://ithelp.ithome.com.tw/upload/images/20201001/20129161Oi38wZVOo6.png
https://ithelp.ithome.com.tw/upload/images/20201001/201291616ximVT63nK.png

簡單小語

看似簡單卻又充滿挑戰細節的咖啡杯,一開始的躍躍欲試到後面的苦惱煩惱,運用各種偽元素拼拼湊湊,最後的波浪顏色區分,還是想不到方法,只能先用線條代替,一開始的簡單不是簡單,是自我感覺良好,是妄自菲薄,結論就是,不知道的還太多,勤加練習學習,並持續練習。

筆記分享

  1. 其實可以通用class但為了方便查看目前選擇狀況,因此改用群組式宣告。
  2. 第一杯輕鬆愜意,掌握偽元素及z-index再用transform:rotate(),可以處理完成。
  3. 第二杯挑戰開始,增加偽元素加強樣式,杯蓋,吸管,冰塊更是靠偽元素與animation共同完成。
  4. 第三杯,杯蓋漸層及梯形,杯套則是用定位及偽元素三角形,共同繪製。
  5. 第四杯敗筆在波浪上下顏色做不出,查找資料僅看懂線條波浪,背景顏色尚有考驗。
  6. 其實許多元素都有overflow情況,但背景色可以通吃,導致視覺上不會有差異
  7. 特殊樣式就沒做RWD(其實是結構很爛,RWD根本崩潰)。
  8. 第一杯若再用transform:rotate(),則會變成公事包(想像ing)。
  9. 第二杯的內容物與外層間隔,長寬及偽元素尺寸確定好,排版一下,落然開朗。
  10. 星巴客杯子好貴,小魯買不起。

持續練習

Practice(200827 Day 31)

樣板來源

Minimalistic Cups


2020 iT邦幫忙鐵人賽 Day31 網頁前端-持續練習(來杯咖啡)


上一篇
Day30 網頁前端-刻意練習(鐵人煉成)
下一篇
Day32 網頁前端-持續練習(玩轉同樂)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言